<template>
    <div>
            <el-main style="padding:0 20px 20px 20px">
                <el-form :model="form" ref="formRef">
                <sc-title title="字典表"></sc-title>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="名称" prop="name" >
                            <el-input v-model="form.name" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="代码" prop="number">
                            <el-input v-model="form.number" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <sc-title title="字典明细表"></sc-title>
                <el-scrollbar height="400px">
                    <el-form-item prop="column">
                        <sc-form-table v-model="dataList" :addTemplate="addTemplate" drag-sort placeholder="暂无数据"
                            @updateIndex="updateIndex">
                            <template #tableContent>
                            <el-table-column prop="number" label="代码" width="200px">
                                <template #default="scope">
                                    <el-input v-model="scope.row.number" placeholder="请输入代码"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="名称" width="200px" >
                                <template #default="scope">
                                    <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="customer1" label="自定义1">
                                <template #default="scope">
                                    <el-input v-model="scope.row.customer1"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="customer2" label="自定义2">
                                <template #default="scope">
                                    <el-input v-model="scope.row.customer2"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="customer3" label="自定义3">
                                <template #default="scope">
                                    <el-input v-model="scope.row.customer3"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="customer4" label="自定义4">
                                <template #default="scope">
                                    <el-input v-model="scope.row.customer4"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="80px">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.status" active-value="normal" inactive-value="disable">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="itemIndex" label="排序" width="80px">
                                <template #default="scope">
                                    <el-input v-model="scope.row.itemIndex"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" label="备注">
                                <template #default="scope">
                                    <el-input v-model="scope.row.remark"></el-input>
                                </template>
                            </el-table-column>
                        </template>
                        </sc-form-table>
                    </el-form-item>
                </el-scrollbar>
            </el-form>
            </el-main>

        <div class="button-position">
            <el-button type="primary" :icon="Check" @click="submit">保存</el-button>
            <el-button @click="updateVisible" :icon="Close">取消</el-button>
        </div>
</div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
import Api from '@/api/model/system'
import scFormTable from '@/components/scFormTable/index.vue'
import scTitle from '@/components/scTitle/index.vue'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})

const form = ref({
})
const dataList = ref([])
const formRef = ref()
const dateLenth = ref()
const addTemplate = reactive({
    number: '',
    name: '',
    customer1: '',
    customer2: '',
    customer3: '',
    customer4: '',
    itemIndex: dateLenth,
    remark: '',
    id: '',
    status: 'normal'
})

onMounted(() => {
    getInit()
})

watch(() => dataList.value, (newValue) => {
    dateLenth.value = newValue.length + 1
}, {
    deep: true
})
const getInit = async () => {
    let res = await Api.syscode.queryDetail.post(props.paramsData)
    form.value = res.bean
    dataList.value = res.dataList
}

const updateVisible = () => {
   emit('updatetable')
}

const updateIndex = () => {
    dataList.value.forEach((item,index)=>{
        item.itemIndex = index+1
    })
}

const restAddFormData = () => {
    formRef.value.resetFields();
}
const submit = async () => {
    let params = {
        bean:form.value,
        dataList: dataList.value
    }
    let res = await Api.syscode.batchUpdate.post(params);
    if (res.code == 200) {
        restAddFormData();
        ElNotification.success({ title: '', message: '添加成功！', duration: 2000 });
        emit('updatetable',true)
    }
}
</script>
<style lang="scss" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
            color:#606266
        }
    }
}
</style>